<!DOCTYPE HTML>
<html xmlns:fb="http://www.facebook/com/2008/fbml" xml:lang="ko" lang="ko" dir="ltr">
<head>
<title>Galaxy Pro! | Product</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<meta name="resource-type" content="document" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--[if IE]>
 <meta http-equiv="imagetoolbar" content="no" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="./css/gal_tab.css" />
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="./css/ie8gte.css" /><![endif]-->
<script type="text/javascript" src="./js/jQuery.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/html5player-ima-vfl4_saJa.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/gal_tab.js"></script>
</head>
<body class="gxt-product">
<!-- 갤럭시 탭 -->
<p class="skip"><a href="#gxt-content">본문 바로가기</a></p>
<div class="gxtWp">
	<div class="gxt-side">
		<h1 class="gxt-logo"><a href="./main.html"><img src="./images/logo.jpg" alt="PRO! 태블릿의 기준을 바꾸다" /></a></h1>
		<div class="gxt-menu">
			<a href="./product.html" class="active"><span class="product">Product</span></a>
			<a href="./event_list.html"><span class="event">Event</span></a>
			<a href="./ambassador.html"><span class="ambassador">Ambassador</span></a>
		</div>
		<div class="gxt-banner">
			<a href="#"><img src="./images/temp/side_banner_182x257.jpg" alt="GALAXY NOTE PRO -309.7 mm WQXGA LCD, -Multi Window, -Virtual Keyboard" /></a>
		</div>
	</div><!-- // gtx-side -->

	<div class="gxt-ct" id="gxt-content">
		<div class="gxt-prodcut-slider">
			<span class="prev"></span>
			<span class="next"></span>
			<div class="gxt-slider-1 gxt-slider">
				<p class="item">
					<a href="./sm-p900.html" onclick="_UX_product_call(this.href, 'Ej4qLobfDoM'); return false;">
						<span class="img"><span><img src="./images/sm-p900/thumb_1.png" alt="Galaxy note pro sm-p900" /></span></span>
						<span class="title"><img src="./images/sm-p900/title_thumb.gif" alt="GALAXY NOTE PRO SM-P900" /></span>
					</a>
				</p>
				<p class="item">
					<a href="./sm-t320.html" onclick="_UX_product_call(this.href, 'IwAS_6o_LqY'); return false;">
						<span class="img"><span><img src="./images/sm-t320/thumb_1.png" alt="Galaxy tab pro sm-t320" /></span></span>
						<span class="title"><img src="./images/sm-t320/title_thumb.gif" alt="Galaxy Tab Pro SM-T320" /></span>
					</a>
				</p>
				<p class="item">
					<!-- blank item box -->
				</p>
			</div>
		</div>
		<script>
			$('.gxt-slider-1').bxSlider({
				nextSelector: '.gxt-prodcut-slider .next',
				prevSelector: '.gxt-prodcut-slider .prev',
				hideControlOnEnd: true,
				slideWidth: 160,
				minSlides: 1,
				maxSlides: 3,
				slideMargin: 20,
				useCSS: false,
				infiniteLoop: false
			});

			var _UX_selected_item = 0;	// 초기 선택 제품 index
			(function(){
				$('.gxt-prodcut-slider .prev').find('.bx-prev').addClass('disabled');
				$('.gxt-slider-1 .item').eq(_UX_selected_item).addClass('active');
				$('.gxt-slider-1 .item a').bind('click', function(){
					$('.gxt-slider-1 .item').removeClass('active');
					$(this).parent().addClass('active');
					// callback
					_UX_selected_item = $('.gxt-slider-1 .item').index($(this));
					return false;
				});
			})();
		</script>

		<div class="gxt-product-detail">
			<div class="gxt-product-call"></div>
			<script>
				var _UX_product_call = function(url, youtubeID){
					$.ajax({
						url: url,
						dataType: 'html'
					}).done(function( data ) {
						$('.gxt-product-call').empty();
						$('.gxt-product-call').html(data);
						_UX_btnScrollTo();		// anchor 스크롤

						$('#callMovLayer').bind('click', function(){	// youtube 레이어 호출
							_UX_playMov(youtubeID); return false;
						});
					});
					return false;
				};

				// anchor 스크롤 function
				var _UX_btnScrollTo = function(){
					$('.scrollTo').bind('click', function(){
						$this = $(this);
						$('.product-detail-box').scrollTo($this.attr('href'), 300);
						return false;
					});
				};

				// youtube
				var _UX_closeMov = function() {
					$('#bigVideo').attr('src','');
					$('#pop_view').fadeOut();
				};
				var _UX_playMov = function(id) {
					$('#bigVideo').attr('src','http://www.youtube.com/embed/' + id + '?controls=1&autoplay=1');
					$('#pop_view').fadeIn();

				};
				var tag = document.createElement('script');		
				tag.src = "//www.youtube.com/iframe_api";		
				var firstScriptTag = document.getElementsByTagName('script')[0];	
				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
				
				// 최초 보여질 제품 ajax 호출
				_UX_product_call('./sm-p900.html', 'Ej4qLobfDoM');
			</script>

			<div class="gxt-prod-evt">
				<p class="item"><a href="#" id="callMovLayer"><img src="./images/temp/event_249_0.jpg" alt="progressive thinking" /></a></p>
				<p class="item add"><a href="./pop_event_2.html" target="_blank" onclick="window.open(this.href, 'event2', 'scrollbars=no,toolbar=no,resizable=no, width=349, height=290'); return false;"><img src="./images/temp/event_249_2.jpg" alt="출시 기념 구매자 이벤트. 갤럭시 태블릿 사고, 프로가 되자!. 기간. 22014년 3월 10일부터 4월 30일 까지" /></a></p>
			</div>

			<div style="display:none;" id="pop_view" class="dim_layer">
				<div class="cont">
					<!-- size 730*435 -->
					<div class="details">
						<div id="video_wrap_big" class="video">
							<iframe width="730" height="435" frameborder="0" title="audi youtube video" allowfullscreen="" src="" id="bigVideo"></iframe>
						</div>
						<a class="close" href="#" onclick="_UX_closeMov(); return false;"><img alt="닫기" src="./images/close_layer.gif"></a>
					</div>
				</div>
			</div>

		</div>
	</div><!-- // gtx-ct -->

</div><!-- // gxtWp -->
<!-- //갤럭시 탭 -->
</body>
</html>